import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 放数据
  // state相当于vue当中的data
  // 页面上访问state方式1-this.$store.state.xxx
  //               方式2-通过mapState方法自动生成计算属性：...mapState(['tomCount', 'jerryCount'])
  state: {
    tomCount: 0,
    jerryCount: 0
  },
  // 放同步方法
  // mutations相当于vue当中的methods
  // 页面上访问mutation方式1-this.$store.commit('yyy', data)
  mutations: {
    addTom(state, data) {
      state.tomCount += data
    },
    addJerry(state, data) {
      state.jerryCount += data
    }
  },
  // 放异步代码
  // 页面上访问actions方式1-this.$store.dispatch('yyy',data)
  // 注意：在actions当中 不能直接修改state中的数据，修改state中的数据只能通过mutations
  actions: {
    addTomAsync(context, data) {
      setTimeout(() => {
        context.commit('addTom', data)
      }, 1500)
    }
  },
  // getters相当于vue中的计算属性
  // 页面上访问getters方式：this.$store.getters.xxx
  // getters: {
  //   showJerryCount(state) {
  //     return 'getters' + state.jerryCount
  //   }
  // },
  getters,
  modules: {
    app,
    settings,
    user
  }
})

export default store
